<!-- 采购收货 -->
<template>
  <div class="container-ymm">
    <div class="header-ymm">
      <el-select v-model="search.status" placeholder="收货状态" class="seach-select" size="small">
        <el-option v-for="item in search.status_options" :key="item.value" :label="item.label" :value="item.value"/>
      </el-select>
      <el-select v-model="search.store" placeholder="全部仓库" class="seach-select" size="small">
        <el-option v-for="item in search.store_options" :key="item.value" :label="item.label" :value="item.value"/>
      </el-select>
      <el-input v-model="search.date" type="text" class="seach-date" disabled placeholder="创建日期" size="small"/>
      <el-input v-model="search.search_name" type="text" class="seach-input " size="small" placeholder="输入SKU查询">
        <i slot="prefix" class="el-input__icon el-icon-search"/>
      </el-input>
      <el-button class="greenbt" size="small">查询</el-button>
      <el-button class="greenbt" size="small" @click="receiveFun()">收货</el-button>
    </div>
    <div class="table-ymm">
      <el-table :data="tableData" style="width: 100%" border highlight-current-row @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="50"/>
        <el-table-column label="供应商" width="80">
          <template slot-scope="scope">
            <span style="color:#28A087">{{ scope.row.name1 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="收获仓" width="80">
          <template slot-scope="scope">
            <span >{{ scope.row.name2 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="SKU编码" width="120">
          <template slot-scope="scope">
            <span >{{ scope.row.name4 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="SKU名称" width="250">
          <template slot-scope="scope">
            <span >{{ scope.row.name6 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="采购状态" width="80">
          <template slot-scope="scope">
            <span v-if="scope.row.name7=='1'" style="color:#28A087">待收货</span>
            <span v-else-if="scope.row.name7=='2'" style="color:#F05050">已完成</span>
          </template>
        </el-table-column>
        <el-table-column label="采购数量" width="80">
          <template slot-scope="scope">
            <span >{{ scope.row.name8 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="实际收货数量" width="120">
          <template slot-scope="scope">
            <span >{{ scope.row.name9 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="采购单位" width="80">
          <template slot-scope="scope">
            <span >{{ scope.row.name10 }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="table-ymm-bt">
      <el-pagination :current-page="table.current_page" :page-sizes="[10, 20, 30, 40]" :page-size="10" :pager-count="table.page_count" :total="table.total" background layout="sizes, prev, pager, next,total" @current-change="handleCurrentChange"/>
    </div>
    <component :is="modal" :modal-data="modalData" @close="closeChild"/>
  </div>
</template>
<script>
// import Addallocation from './dialog/Addallocation.vue'
import Received from './dialog/Received.vue'
export default{
  data() {
    return {
      modal: null, modalData: {},
      search: {
        status: '', status_options: [],
        store: '', store_options: [],
        date: '', search_name: ''
      },
      tableData: [
        {
          name1: 'FH45454523215', name2: '供应商代发', name3: '供应商代发', name4: '供应商代发', name5: '供应商代发', name6: '供应商代发', name7: '1', name8: '供应商代发', name9: '供应商代发',
          name10: '供应商代发', name11: '供应商代发', name12: '供应商代发', name13: '供应商代发', name14: '供应商代发', name15: '供应商代发', name16: '供应商代发'
        },
        {
          name1: 'FH45454523215', name2: '供应商代发', name3: '供应商代发', name4: '供应商代发', name5: '供应商代发', name6: '供应商代发', name7: '2', name8: '供应商代发', name9: '供应商代发',
          name10: '供应商代发', name11: '供应商代发', name12: '供应商代发', name13: '供应商代发', name14: '供应商代发', name15: '供应商代发', name16: '供应商代发'
        }
      ],
      table: {
        current_page: 1, page_count: 7, total: 100
      }
    }
  },
  methods: {
    // 分页
    handleCurrentChange() {

    },
    // 表格选择
    handleSelectionChange() {

    },
    closeChild() {
      this.modal = null
    },
    receiveFun() {
      this.modalData = { type: '' }
      this.modal = Received
    }
  }
}
</script>
